<!-- 核销题目 -->
<template>
  <view class="page">
    <u-navbar autoBack :placeholder="true">
      <template #center>
        <u-text suffixIcon="arrow-down-fill" align="center" text="李同学-题目核销" size="32rpx" color="#333"
          @click="showStudentList = !showStudentList"></u-text>
      </template>
    </u-navbar>
    <view class="main">
      <view class="bg-white radius-lg padding" v-for="item in 3" :key="item">
        <u-text text="题号：1A" size="32rpx" color="#333" bold></u-text>
        <image src="/static/image/img-math.png" mode="aspectFit"></image>
        <u-divider></u-divider>
        <view class="flex align-center justify-between">
          <up-radio-group labelSize="32rpx" v-model="value" placement="row">
            <up-radio activeColor="#0060E6" label="正确"></up-radio>
            <up-radio style="margin-left: 80rpx;" activeColor="#0060E6" label="错误"></up-radio>
          </up-radio-group>
          <view>
            <u-button customStyle="width:120rpx;height:60rpx;" shape="circle" color="#0060E6" text="上传"></u-button>
          </view>
        </view>
      </view>

      <PopupBox :show="showStudentList" :top="0">
        <view class="popup-item" v-for="item in studentList" :key="item.id">
          <u-text :text="item.name" size="32rpx" color="#333"></u-text>
          <u-text align="right" :text="item.status == 1 ? '已核销' : '待核销'" size="32rpx"
            :color="item.status == 1 ? '#0060E6' : '#FF5252'"></u-text>
        </view>
      </PopupBox>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue';
import PopupBox from '@/components/PopupBox/index.vue';

const showStudentList = ref(false)

const studentList = ref([
  {
    name: '张三',
    status: 1,
  },
  {
    name: '张三',
    status: 2
  },
])
</script>
<style scoped lang="scss">
.popup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 40rpx;
  background: white;
  border-bottom: solid 1px #eee;
}
</style>